<script setup>
	import {
		navigateBack,
		navigateToIntegral,
	} from "@/assets/scripts/navigate.js"

	import {
		getSignInListApi,
		signInApi,
		redeemApi,
	} from '@/assets/api/other/signIn.js'
	import {
		getInfo2Api,
	} from "@/assets/api/other/recommend.js"

	// 组件
	import userBanner from "@/components/userBanner.vue"
	import {
		onMounted,
		ref
	} from "vue";

	const num = ref('')
	const maxNum = ref('')
	const isSignIn = ref(false)
	const userInfo = ref({})
	const rechargePopup = ref()
	const signInList = ref([])

	// 展开日历
	const onDayClick = (data) => {
		let choose = data.date //用户点中的数据
		if (actDay.value.includes(choose)) { //如果用户点击的日期已经存在
			// 移除元素下标
			const index = actDay.value.indexOf(choose);
			//删除用户点击的日期
			actDay.value.splice(index, 1)
		} else {
			//添加用户点击的日期 
			actDay.value.push(choose)
		}
	}

	const rechargeBtn_handleConfirm = async () => {
		const user = uni.getStorageSync('user')
		if (parseInt(maxNum.value) < parseInt(num.value)) {
			uni.showToast({
				title: '积分不足',
				icon: 'error'
			})
			return
		}
		const res = await redeemApi(num.value)
		if (res.code === 200) {
			uni.showToast({
				title: '兑换成功',
				icon: 'success',
				complete: () => {
					rechargePopup.value.close()
					setTimeout(() => {
						userInfo_init() // 用户信息
					}, 1000)
				}
			})
		} else {
			uni.showToast({
				title: '兑换失败',
				icon: 'error'
			})
		}
	}

	const handleExchange = async () => {
		const user = uni.getStorageSync('user')
		if (parseInt(user.integral) < 10) {
			uni.showToast({
				title: '积分不足',
				icon: 'error'
			})
			return
		}
		rechargePopup.value.open()
	}

	const handleSignIn = async () => {
		const res = await signInApi()
		if (res.code === 200) {
			uni.showToast({
				title: '签到成功',
				icon: 'success',
				complete: () => {
					setTimeout(() => {
						userInfo_init() // 用户信息
						signInList_init() // 签到记录
					}, 1000)
				}
			})
		} else {
			uni.showToast({
				title: '签到失败',
				icon: 'error'
			})
		}
	}

	onMounted(() => {
		userInfo_init() // 用户信息
		signInList_init() // 签到记录
	})

	const userInfo_init = async () => {
		const user = uni.getStorageSync('user')
		const res = await getInfo2Api(user.userId)
		if (res.code === 200) {
			userInfo.value = res.user
			maxNum.value = parseInt(userInfo.value.integral / 10)
			uni.setStorageSync('user', res.user)
		} else {
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'error',
			})
		}
	}

	const signInList_init = async () => {
		const user = uni.getStorageSync('user')
		const res = await getSignInListApi(user.userId)
		if (res.code === 200) {
			signInList.value = res.rows
			isSignIn.value = signInList.value.some(o => o.signDate == new Date().toLocaleDateString().replace(
				/\//g, '-'))
		}
	}
</script>

<template>

	<uv-popup ref="rechargePopup" mode="center" round='10' closeable>
		<view class="recharge-popup">
			<view class="font-fs20 font-wb d-flex d-flex-jcc color-333">
				积分兑换缅怀币
			</view>
			<view class="px-big mt-big">
				<uv-input placeholder="请输入" v-model="num" :customStyle="{height:'46px', padding:'0 15px'}">
					<template v-slot:prefix>
						<uv-text text="兑换:" margin="0 3px 0 0" type="primary"></uv-text>
					</template>
					<template v-slot:suffix>
						<uv-text :text="'可兑换'+maxNum" margin="0 3px 0 0" type="error"></uv-text>
					</template>
				</uv-input>
			</view>
			<view class="px-big mt-big">
				<view class="px-big ">
					<uv-button type="success" text="兑换" shape='circle' @click="rechargeBtn_handleConfirm"></uv-button>
				</view>
			</view>
		</view>
	</uv-popup>

	<uv-navbar :fixed="false" @leftClick="navigateBack" title="签到">
		<template #right>
			<view class="integral-btn" @click="navigateToIntegral">
				积分记录
			</view>
		</template>
	</uv-navbar>

	<userBanner :isShowSignIn="false" :isRecharge='false' :isSignIn='isSignIn' :isUserEditAble='false'
		@handleSignIn='handleSignIn' @handleExchange='handleExchange' :userInfo="userInfo">
	</userBanner>

	<view class="bg-grey-fill bg">
		<uv-row class="px-normal pt-normal">
			<uv-col class="bg-white">
				<zeng-calen class="zeng-calen" :actDay="signInList.map(o=>o.signDate)"></zeng-calen>
				<!-- <zeng-calen class="zeng-calen" :actDay="actDay" @onDayClick='onDayClick'></zeng-calen> -->
			</uv-col>
		</uv-row>
		<uv-row class="p-normal mt-normal">
			<uv-col class="bg-white ">
				<view class="p-normal">
					<view class="d-flex d-flex-aic title">
						<view class="font-wb">
							积分说明
						</view>
					</view>
					<view class="mt-normal content">
						<view class="px-small">
							1. 首次创建纪念馆可获取10个积分
						</view>
						<view class="px-small">
							2. 首次创建纪念馆可获取10个积分获取10个积分
						</view>
						<view class="px-small">
							3. 首次创建纪念馆可获取10个积分首次创建纪念馆可获取
						</view>
						<view class="px-small">
							4. 首次创建纪念馆可获取10个积分可获取10个积分
						</view>
					</view>
				</view>
			</uv-col>
		</uv-row>
	</view>


</template>

<style lang="scss" scoped>
	.recharge-popup {
		width: 300px;
		padding: 40px 0;

		.color-333 {
			color: #333333;
		}
	}

	.bg {
		background-color: #f5f5f5;
	}

	.integral-btn {
		color: #12b886;
	}

	::v-deep .zeng-calen {

		.today {
			background-color: #00A2E8 !important;
		}

		.pre,
		.next {
			display: none;
		}
	}

	.title {
		color: #666666;
	}

	.content {
		line-height: 28px;
		color: #999;
	}
</style>